<template>
	<uni-nav-bar title="配送费膨胀-车牌验证" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale">{{name}}</view>
	<view class="package_sale" style="color: #558AF1;">车友绑定车牌号的加注单可按照平台策略膨胀配送费</view>
	<view class="package_sale">
		<view>
			<view>请拍照上传本单实际加注的车辆照片，保证车牌号清晰</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1"
				:sourceType="sourceType" />
		</view>
		<view class="top">请确认系统识别车牌号是否正确</view>
		<view class="centers">
			<view v-for="(item,index) in 7" :key="index" :style="{display:numberplate?'none':'block'}"></view>
			<view v-for="(item,index) in list" :key="index" :style="{display:!numberplate?'none':'block'}">{{item}}
			</view>
		</view>
		<view class="but" @click="submit()">车牌号正确</view>
	</view>
	<Watermark ref="watermark" @selected="selected"></Watermark>
</template>

<script setup lang="ts">
	import { navBack, redirectTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import Watermark from '@c/watermark.vue';
	import { getStaffDriverOrderInfo } from '@/gql/earthPushing/teamJoin';
	import { toPublish } from '@mqtt';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const numberplate = ref(''); //车牌号
	const list = ref([])
	const sourceType = ["camera"]
	const orderLists = ref()
	// 上传图片
	const imgList = ref([])
	const image = ref()
	const watermark = ref(null)
	const name = ref('')
	const orderID = ref()
	onLoad((pearm) => {
		name.value = pearm.name
		orderID.value = Number(pearm.id)
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getStaffDriverOrderInfo,
			variables: {
				id: orderID.value
			},
		};
		toPublish(
			'ql/staff/getStaffDriverOrderInfo',
			payload,
			(obj : any) => {
				const { getStaffDriverOrderInfo } = obj.data;
				orderLists.value = getStaffDriverOrderInfo
				if (getStaffDriverOrderInfo.staff_image) {
					redirectTo('Sale/delivery/expansionOver?id=' + orderID.value + '&name=' + name.value)
				} else if(getStaffDriverOrderInfo.cart_image){
					imgList.value.push(getStaffDriverOrderInfo.cart_image)
					numberplate.value = getStaffDriverOrderInfo && getStaffDriverOrderInfo.check_cart_code ? getStaffDriverOrderInfo.check_cart_code : '';
					list.value = numberplate.value ? numberplate.value.split('') : [],
					image.value = '/uploads'+getStaffDriverOrderInfo.staff_image.split('/uploads')[1]
				}
			}
		);
	}
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload3',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				console.log(JSON.stringify(uploadFileRes.data))
				const state = JSON.parse(uploadFileRes.data).data
				// numberplate.value = state.cart_code ? state.cart_code : '';
				// list.value = numberplate.value ? numberplate.value.split('') : []
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(state.fullurl)
				image.value = state.url
				analyzing(state.fullurl)
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	//获取车牌号
	function analyzing(img : string) {
		uni.request({
			url: 'https://orm.anlan.tech/ocr.php?cmd=getCartCode', //仅为示例，并非真实接口地址。
			data: {
				image: img
			},
			success: (res) => {
				numberplate.value = res.data && res.data.data ? res.data.data : '';
				list.value = numberplate.value ? numberplate.value.split('') : []
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
		image.value = ''
		numberplate.value = ''
		list.value = []
	}
	//提交
	function submit() {
		if (!image.value) {
			errorToast('请上传图片')
			return
		}
		if (!numberplate.value) {
			errorToast('请上传含有车牌照的图片')
			return
		}
		showLoading()
		const payload = {
			staff_id,
			cart_code: numberplate.value,
			image: image.value,
			id: orderID.value,

		};
		toPublish('staff/addCartImage',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
					setTimeout(() => {
						redirectTo('Sale/delivery/expansionOver?id=' + orderID.value + '&name=' + name.value)
					}, 1000)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 30rpx;
	}

	.centers {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;

		view {
			width: 72rpx;
			height: 72rpx;
			background: #eee;
			border: 1px solid #eee;
			border-radius: 5px;
			text-align: center;
			line-height: 78rpx;
		}
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}
</style>
<style>
	.package_sale>>>.mk-upload {
		padding: 0px;
	}
</style>